<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-11-13 10:21
  PageName：f_practice6_highlight.html
  Function：实战案例 - 高亮提示表单
  URL：http://localhost:8080/j_form/j7_practice/f_practice6_highlight.html
-->

<head>
    <meta charset="UTF-8">
    <title>实战案例 - 高亮提示表单</title>

    <style type="text/css">
        body {
            font-size: 12px;
        }

        .title {
            width: 100px;
            float: left;
            text-align: right;
            font-weight: bold;
            margin: 6px 0;
        }

        .input1 {
            background-color: #EEEEEE;
            border-bottom: #FFFFFF 1px solid;
            border-left: #CCCCCC 1px solid;
            border-right: #FFFFFF 1px solid;
            border-top: #CCCCCC 1px solid;
        }

        .input2 {
            background-color: #F0F8FF;
            border: 1px solid #999;
        }

        input, textarea {
            display: block;
            margin: 3px 0;
            padding: 4px;
        }

        input:hover, textarea:hover {
            border: 1px solid #aaa;
        }
    </style>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
    <fieldset>
        <legend>高亮提示表单</legend>
        <label for="name" class="title">姓名：</label>
        <input size="40" name="name" class="input1" onBlur="this.className='input1'" onFocus="this.className='input2'"><br>

        <label for="email" class="title">邮箱：</label>
        <input size="40" name="email" class="input1" onBlur="this.className='input1'" onFocus="this.className='input2'"><br>

        <label for="url" class="title">网址：</label>
        <input size="40" name="url" class="input1" onBlur="this.className='input1'" onFocus="this.className='input2'"><br>

        <label for="subject" class="title">主题：</label>
        <input size="40" name="subject" class="input1" onBlur="this.className='input1'" onFocus="this.className='input2'"><br>

        <label for="message" class="title">内容：</label>
        <textarea name="message" cols="39" rows="5" class="input1" onBlur="this.className='input1'" onFocus="this.className='input2'"></textarea>
    </fieldset>
</form>
</body>
</html>